<template>
  <div>
     <city-header></city-header>
     <city-input :citylist="citylist"></city-input>
     <city-list :letter="letter" :citylist="citylist" :hotlist="hotlist"></city-list>
     <city-aplah :aplahlist="aplahlist" @changeheadle="changeheadle"></city-aplah>
  </div>
</template>

<script>
import CityHeader from '../components/city/cityheader'
import CityInput from '../components/city/cityinput'
import CityList from '../components/city/citylist'
import CityAplah from '../components/city/cityaplah'

import axios from 'axios'

export default {
  name: 'City',
  data () {
    return {
      citylist: [],
      aplahlist: [],
      hotlist: [],
      letter: ''
    }
  },
  components: {
    CityHeader,
    CityInput,
    CityList,
    CityAplah
  },
  beforeMount () {
    axios.get('/api/static/mock/citylist.json').then((res) => {
      const primsedata = res.data
      this.hotlist = primsedata.hot
      this.citylist = primsedata.citylist
    })
    axios.get('/api/static/mock/aplah.json').then((res) => {
      const primsedata = res.data
      this.aplahlist = primsedata
    })
  },
  methods: {
    changeheadle (value) {
      this.letter = value
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
